#localTime {
    position: fixed; /* 固定位置，不随页面滚动而移动 */
    top: 0; /* 位于页面顶部 */
    width: 100%; /* 宽度占满容器 */
    background-color: #f8f9fa; /* 背景颜色，根据需要调整 */
    z-index: 1000; /* 确保它在页面上的其他元素之上 */
    padding: 10px 0; /* 添加一些内填充 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加一些阴影以获得更好的视觉效果 */
    text-align: center; /* 文本居中显示 */
}


body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px; /* 继续保持较小的间距 */
    width: 95vw; /* 调整为视口宽度的95%，以适应大部分屏幕并留出边距 */
    max-width: 100vw; /* 确保不会超出视口宽度 */
    padding: 5px; /* 保留一定的填充 */
    overflow: hidden; /* 防止内容溢出 */
}

.gallery img {
    height: 100%; /* 高度自动调整以保持图片比例 */
    max-height: 20vh; /* 设置最大高度，根据屏幕高度的百分比调整 */
    width: 100%; /* 使图片宽度自动填满容器宽度 */
    /*object-fit: cover; !* 保持图片的宽高比 *!*/
    object-fit: contain; /* 图片尽可能大地填充容器，不裁剪，可能留有空白 */
}

/* 媒体查询，对不同屏幕尺寸做进一步的样式调整 */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 对于较小屏幕，每行显示2个图像 */
    }
    .gallery img {
        max-height: 25vh; /* 在较小屏幕上增加最大高度，以提高显示效果 */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); /* 对于中等屏幕，每行显示3个图像 */
    }
}
